<template>
  <el-dialog
    :title="title"
    :custom-class="
      customClass ? `g-common-dialog ` + customClass : ' g-common-dialog '
    "
    :top="dialog_top"
    :modal="modal"
    :append-to-body="appendToBody"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :visible.sync="visible"
    :destroy-on-close="destroyOnClose"
    :center="center"
    :width="width"
    @close="$emit('close')"
  >
    <slot name="title" slot="title"></slot>
    <div class="g-common-dialog-body">
      <slot></slot>
    </div>
    <!-- <div class="g-common-dialog-footer"> </div>-->
    <slot slot="footer" name="footer"></slot>
  </el-dialog>
</template>
<script>
export default {
  props: {
    title: { type: String, default: "" },
    appendToBody: { type: Boolean, default: false },
    closeOnClickModal: { type: Boolean, default: false },
    visible: { type: Boolean, default: false },
    customClass: { type: String, default: "" },
    modal: { type: Boolean, default: true },
    lockScroll: {
      type: Boolean,
      default: true,
    },
    closeOnPressEscape: {
      type: Boolean,
      default: false,
    },
    top: { type: String, default: "15vh" },
    beforeClose: Function,
    center: {
      type: Boolean,
      default: false,
    },
    width: { type: String, default: "960px" },
    destroyOnClose: Boolean,
  },
  data() {
    return {};
  },
  computed: {
    dialog_top() {
      return this.top; //根据不同屏幕计算
    },
  },
  methods: {},
};
</script>
